<template>
  <div id="app">
    <Launch v-if="scene === 'launch'" @end="play"></Launch>
    <Plot v-if="scene === 'plot'"></Plot>
    <Home v-if="scene === 'home'"></Home>
  </div>
</template>

<script>
import Launch from './components/scene/Launch'
import Plot from './components/scene/Plot'
import Home from './components/scene/Home'

export default {
  name: 'app',

  components: {
    Launch,
    Plot,
    Home
  },

  data() {
    return {
      scene: 'launch',
    }
  },

  computed: {
    renderCount() {
      return this.$store.state.renderCount
    }
  },

  watch: {
    renderCount() {
      this.scene = this.$game.data.state.scene
    }
  },

  mounted() {
    let loading = document.querySelector('.main-loading')
    loading.parentNode.removeChild(loading)
    document.querySelector('#app').style.display = 'block'
    // this.$game.init(this)
  },

  methods: {
    play() {
      this.$game.init(this)
    },
  },
}
</script>

<style lang="scss">
</style>
